<template>
    <div class="login-box">
        <el-form ref="ruleFormRef" :model="data.form" :rules="rules" label-width="120px" class="demo-ruleForm"
            status-icon>
            <h1 class="title">系统登录</h1>
            <el-form-item label="账号" prop="username">
                <el-input v-model="data.form.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="data.form.password" type="password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" class="login-form-button">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { reactive, computed } from "vue";
import { useStore } from 'vuex';
import { useRouter } from "vue-router";
const $router = useRouter();
const $store = useStore()
const data: any = reactive({
    form: {
        username: 'admin999',
        password: 'admin999'
    }
})
const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
})
const submitForm = () => {
    $store.dispatch("action_login",data.form).then((res: any) => {
        $router.replace("/");
    });
}
</script>
<style lang="scss" scoped>
.login-box {
    background: url("http://websong.wang:3002/static/img/login-bg.0a3a597b.jpg");
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    .demo-ruleForm {
        padding: 20px;
        background: #fff;
        height: 300px;
        max-height: 100%;

        .title {
            text-align: center;
            margin-bottom: 4vh;
            width: 100%;
        }

        .login-form-button {
            width: 100%;
        }
    }
}
</style>
<style>
.el-input__wrapper {
    width: 264px;
}
</style>